.winners-list{
	width: 686rpx;
	height: 392rpx;
	background: linear-gradient(180deg, #FFF7DB 0%, #FFA347 100%);
	border-radius: 24rpx 24rpx 24rpx 24rpx;
	position: relative;
	padding: 0rpx 32rpx 0rpx 32rpx;
	box-sizing: border-box;
	.list-title-container{
		width: 480rpx;
		height: 72rpx;
		background: linear-gradient(180deg, #FFF7DC 0%, #FFB565 100%);
		box-shadow: 0rpx 6rpx 2rpx 2rpx rgba(172,53,0,0.3);
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		position: absolute;
		top: 0rpx;
		left: 50%;
		transform: translate(-50%,-50%);
		font-size: 32rpx;
		font-family: $global-font-family;
		font-weight: 800;
		color: #B21C00;
		line-height: 72rpx;
		text-align: center;
	}
	.list-header-container{
		position: relative;
		top: 60rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		.header-item{
			width: 164rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			font-size: 28rpx;
			font-family: $global-font-family;
			font-weight: bold;
			color: #B21C00;
		}
	}
	.scroll-column-container{
		position: relative;
		top: 72rpx;
		height: 258rpx;
		overflow: hidden;
		.list-wrapper{
			position: absolute;
			top:0rpx;
			width: 100%;
			animation-duration: 10s;
			animation-timing-function:linear;
			animation-iteration-count:infinite;
			&.first{
				animation-name: scroll-first;
				animation-fill-mode: forwards;
				animation-iteration-count:1 !important;
			}
			&.second{
				animation-name: scroll-second;
			}
			&.third{
				transform: translateY(100%);
				animation-delay: 5s;
				animation-name: scroll-third;
			}
			.list-item{
				display: flex;
				height: 86rpx;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #D29A61;
				font-size: 24rpx;
				font-family: $global-font-family;
				text-align: center;
				&:last-of-type{
					border-bottom: none;
				}
				.item-user{
					width: 150rpx;
					font-weight: 400;
					color: #8B3F00;
				}
				.item-time{
				    flex: 1;
					font-weight: 400;
					color: #8B3F00;
				}
				.item-prize{
					width: 150rpx;
					font-weight: 800;
					color: #E60000;
				}
			}
		}
	}
}

// @keyframes scroll{
// 	0%{
// 		transform: translateY(0);
// 	}
// 	50%{
// 		transform: translateY(-100%);
// 		top: 0;
// 	}
// 	51%{
// 		transform: translateY(0);
// 		// left: 100%;
// 		top: 100%;
// 	}
// 	100%{
// 		transform: translateY(0);
// 		top: 0;
// 	}
// }

// @keyframes copy-scroll{
// 	0%{
// 		transform: translateY(100%);
// 		 // top:100%;
// 	}
// 	50%{
// 		transform: translateY(0);
// 		// top:0;
// 	}
// 	99%{
// 		transform: translateY(-100%);
		
// 		top: 0;
// 	}
// 	100%{
// 		transform: translateY(0);
// 		top:258rpx;
// 	}
// }

@keyframes scroll-first{
	0%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(-200%);
	}
}

@keyframes scroll-second{
	0%{
		transform: translateY(100%);
	}
	100%{
		transform: translateY(-100%);
	}
}

@keyframes scroll-third{
	0%{
		transform: translateY(100%);
	}
	100%{
		transform: translateY(-100%);
	}
}